<template>
  <div class="atlas-box">
    <div class="atlas-content">
      <!-- 头部 -->
      <div class="box-header">
        <div class="tab-box">
          <div class="tab" v-for="(item, index) of tabList" :key="index" :class="{active: index === activeTabIndex}" @click="onChangeTab(index)">
            <img :src="item.img" alt="" class="icon">
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
        <div class="right-message">
          <div class="left">
            <div class="btn btn-fabu" @click="onFabu">
              <img src="../../assets/fabu.png" class="btn-icon" alt="">
              图谱发布会
            </div>
            <div class="btn btn-download" @click="onDownload">
              <img src="../../assets/download.png" class="btn-icon" alt="">
              下载图谱
            </div>
          </div>
          <div class="right">
            <div class="qrcode">
              <div class="img"></div>
            </div>
            <div class="desc">
              查看图谱<br>
              微信扫码
            </div>
          </div>
        </div>
      </div>
      <!-- 内容区 -->
      <div class="img-box">
        <!-- <el-image
          style="width: 100%; height: 100%"
          :src="tabList[activeTabIndex].bigImg"
          fit="contain"></el-image> -->
          <el-image
            ref="imageRef"
            style="width: 100%; height: 100%"
            :src="tabList[activeTabIndex].bigImg" 
            :preview-src-list="bigImgList">
          </el-image>
          <div class="full" @click="full">
            <img :src="fullSrc" alt="">
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullSrc: require('../../assets/full-screen.png'),
      bigImgList: [
        require('../../assets/atlas1.png'),
        require('../../assets/atlas2.png'),
        require('../../assets/atlas3.png'),
        require('../../assets/atlas4.png'),
        require('../../assets/atlas5.png')
      ],
      tabList: [
        {
          img: require('../../assets/atlas-2.png'),
          name: 'AIoT图谱',
          bigImg: require('../../assets/atlas2.png')
        },
        {
          img: require('../../assets/atlas-1.png'),
          name: '5G产业图谱',
          bigImg: require('../../assets/atlas1.png')
        },
        {
          img: require('../../assets/atlas-3.png'),
          name: '区块链图谱',
          bigImg: require('../../assets/atlas3.png')
        },
        {
          img: require('../../assets/atlas-4.png'),
          name: '边缘智能图谱',
          bigImg: require('../../assets/atlas4.png')
        },
        {
          img: require('../../assets/atlas-5.png'),
          name: '传感器图谱',
          bigImg: require('../../assets/atlas5.png')
        }
      ],
      activeTabIndex: 0
    }
  },
  methods: {
    full () {
      // this.$refs['imageRef'].click()
      document.querySelector('.el-image__preview').click()
    },
    onFabu() {
      const url = 'https://m.inmuu.com/v1/live/albums/2498';
      window.open(url, '_blank');
    },
    onDownload() {
      const url = 'https://pan.baidu.com/s/1fVFughzNL0znfOFNNQjNPA#/';
      window.open(url, '_blank');
    },
    onChangeTab(index) {
      this.activeTabIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.atlas-box {
  background: #F1F1F1;
  padding: 24px;
  .atlas-content {
    width: 1180px;
    margin: 0 auto;
    .box-header {
      width: 100%;
      position: relative;
      .tab-box {
        overflow: hidden;
        .tab {
          width: 140px;
          height: 121px;
          text-align: center;
          margin-right: 12px;
          background: #FFFFFF;
          float: left;
          border: 1px solid #D8D8D8;
          border-radius: 4px 4px 0px 0px;
          cursor: pointer;
          .icon {
            width: 62px;
            height: 52px;
            margin-bottom: 4px;
            margin-top: 21px;
          }
          &:hover {
            font-weight: 600;
            background: #F6D5D6;
            color: #D42A31;
            border: 1px solid #F6D5D6;
          }
          &.active {
            font-weight: 600;
            background: #F6D5D6;
            color: #D42A31;
            border: 1px solid #F6D5D6;
          }
        }
      }
      .right-message {
        position: absolute;
        top: 0;
        right: 0;
        .left {
          float: left;
          margin-right: 32px;
          .btn {
            width: 138px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            text-align: center;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            cursor: pointer;
            .btn-icon {
              width: 20px;
              height: 20px;
              vertical-align: middle;
              margin-right: 2px;
            }
          }
          .btn-fabu {
            color: #696969;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #D8D8D8;
            margin-bottom: 20px;
          }
          .btn-download {
            color: #D42A31;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #D42A31;
          }
        }
        .right {
          width: 200px;
          height: 100px;
          border-radius: 4px;
          border: 1px solid #D8D8D8;
          overflow: hidden;
          float: left;
          background: #FFFFFF;
          .qrcode {
            float: left;
            padding: 10px;
            box-sizing: border-box;
            border-right: 1px solid #D8D8D8;
            .img {
              width: 80px;
              height: 80px;
              background: url('../../assets/ercoed.jpg') no-repeat;
              background-size: contain;
            }
          }
          .desc {
            padding-top: 32px;
            width: 99px;
            height: 99px;
            text-align: center;
            float: left;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #696969;
            line-height: 18px;
          }
        }
      }
    }
    .img-box {
      width: 100%;
      height: auto;
      background: #FFFFFF;
      border-radius: 0px 4px 4px 4px;
      border: 1px solid #F6D5D6;
      // padding: 20px;
      box-sizing: border-box;
      transition: .5s all;
      position: relative;
      padding-bottom: -20px;
      .full {
        width: 48px;
        height: 48px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1;
          border-radius: 4px 0px 4px 0px;
          border: 1px solid #F6D5D6;
          padding: 5px;
          background: #fff;
          cursor: pointer;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>